<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
      body {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100vh;

      }
      .box {
          width: 500px;
          height: 100px;
          border: 2px solid #FFE9AE;
      }
      .box__item {
          height: 100%;
          width: 100px;
          background-image: linear-gradient(35deg, #FFB3B3, #FFDBA4);
      }
  </style>
</head>
<body>
<div class="box">
  <div class="box__item"></div>
</div>
</body>
</html>
<script>
  const boxItem = document.querySelector(".box__item");
  const box = document.querySelector(".box");
  // 方块的移动目标距离： 父元素 - 子元素 - 父元素的左右边框宽度
  const targetPosition  = box.getBoundingClientRect().width - boxItem.getBoundingClientRect().width - 4;
  // 定义动画初始位置
  const initialPosition  = 0;
  // 设置2秒完成该动画
  const animationDuration = 10000;
  let startTime;
  function updataAnimate(timestamp) {
    // 记录动画开始时间
    if(!startTime) startTime = timestamp;
    // 计算动画的经过时间
    const elapsedTime = timestamp - startTime;
    // 计算动画的进度
    const progress = Math.min(elapsedTime / animationDuration, 1);
    // 获取当前位置
    const currentPosition = initialPosition + (targetPosition - initialPosition) * progress;
    // 更新动画
    boxItem.style.transform = `translateX(${currentPosition}px)`;
    if(progress < 1) requestAnimationFrame(updataAnimate)

  }
  requestAnimationFrame(updataAnimate)

</script>


